<template>
  <div>
    <h3 v-if="this.auth === '0'" style="vertical-align: middle; margin-top: 10px; margin-left: 20px;">
      您不是管理员，没有访问权限!!!</h3>
    <div class="app-container" v-if="this.auth === '1'||this.auth === '2'">
      <!--表单查询-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="管理员用户名">
          <el-input v-model="searchObj.username" placeholder="管理员用户名"/>
        </el-form-item>
        <el-form-item label="管理员姓名">
          <el-input v-model="searchObj.adminName" placeholder="管理员姓名"/>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      </el-form>
      <!-- 工具条 -->
      <!--    <div>-->
      <!--      <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>-->
      <!--    </div>-->
      <!-- banner列表 -->
      <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
<!--        <el-table-column type="selection" width="55"/>-->
        <el-table-column type="index" label="序号" min-width="30"/>
        <el-table-column prop="username" label="用户名" min-width="100" />
        <el-table-column prop="adminName" label="姓名" min-width="80" />
        <el-table-column prop="licence42" label="登记机关名称" min-width="300" />
        <el-table-column prop="licence42Code" label="登记机关代码" min-width="90" />
<!--        <el-table-column prop="location" label="单位所在地" min-width="150" width="350"/>-->
        <el-table-column prop="accountType" label="用户类型" min-width="80" />
        <el-table-column label="状态" min-width="70">
          <template slot-scope="scope">
            {{ scope.row.status === '1' ? '可用' : '不可用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="234px" align="center">
          <template slot-scope="scope" >

            <!--          修改按钮-->
            <router-link :to="'/admin/update/'+scope.row.adminId">
              <el-button type="primary" size="mini">修改</el-button>
            </router-link>

            <!--          解锁与锁定-->
            <el-button v-if="scope.row.status==='1'" type="primary" size="mini"
                       :disabled="scope.row.accountType==='超级管理员'"
                       @click="lockAdmin(scope.row.adminId,0)">锁定
            </el-button>
            <el-button v-if="scope.row.status==='0'" type="danger" size="mini"
                       :disabled="scope.row.accountType==='超级管理员'"
                       @click="lockAdmin(scope.row.adminId,1)">解锁
            </el-button>

            <!--          删除按钮-->
            <el-button type="danger" size="mini"
              :disabled="scope.row.accountType==='超级管理员'"
              @click="removeDataById(scope.row.adminId)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="current"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
      />
    </div>
  </div>
</template>
<script>
import editApi from "../../api/admin/edit"
import Layout from "../layout/Layout";
import {myLogout} from "@/api/login";

export default {
  data() {
    return {
      // 定义变量  数据
      auth: '',
      current: 1,
      limit: 10,
      searchObj: {},
      list: [],
      total: 0,
      multipleSelection: [] //  批量选择中选择的记录列表
    }
  },
  created() {
    // 权限限制
    this.getAuthCode();
  },

  watch: {
    auth(newVal) {
      if (newVal === '1' || newVal === '2') {
        this.getList(1);
      }
    },
  },

  methods: {
    // 管理员列表
    getList(current) {
      this.current = current
      editApi.getList(this.current, this.limit, this.searchObj)
        .then(response => {
          this.list = response.data.records
          this.total = response.data.total
        })
        .catch(error => {
            console.log(error)
            myLogout();
            this.$store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          }
        )
    },
    // 删除管理员的方法
    removeDataById(id) {
      this.$confirm('此操作将永久删除管理员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定执行then方法
        // 调用接口
        editApi.deleteAdminInfo(id)
          .then(response => {
            // 提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新页面
            this.getList(this.current)
          })
          .catch(error => {
            console.log(error)
            myLogout();
            this.$store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          })
      })
    },
    // 复选框操作
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    // 批量删除
    removeRows() {
      this.$confirm('此操作将批量删除管理员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定执行then方法
        var idList = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var obj = this.multipleSelection[i]
          idList.push(obj.adminId)
        }
        // 调用接口
        editApi.batchRemoveHosp(idList)
          .then(response => {
            // 提示
            this.$message({
              type: 'success',
              message: '删除成功!'

            })
            // 刷新页面
            this.getList(this.current)
          })
          .catch(error => {
            console.log(error)
            myLogout();
            this.$store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          })
      })
    },
    // 解锁与锁定
    lockAdmin(id, status) {
      editApi.lockAdmin(id, status)
        .then(response => {
          this.getList(this.current)
        })
        .catch(error => {
          console.log(error)
          myLogout();
          this.$store.dispatch('LogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
    },
    getAuthCode() {
      editApi.getAuth().then(res => {
        this.auth = res.data;
        if (this.auth === '0') {
          // 如果 auth===0 ，则重定向至 /404 页面
          this.$router.push('/404');
        }
      }).catch(error => {
        console.log(error)
        myLogout();
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      })
    },


  }
}
</script>
